{% extends 'checkstand/base/index.html' %}
{% load staticfiles %}

{% block css %}

{% endblock %}

{% block js %}
    <script src="{% static 'bootstrapt/js/printThis.js' %}"></script>
{% endblock %}

{% block nav_desk %}class="active"{% endblock %}

{% block html_content %}
    <div style="margin-bottom: 20px">
        <div class="button-group">
            <button type="button" class="button button-primary" data-toggle="modal" data-target="#addDesks">
                批量新增
            </button>
            <button class="button button-primary   button-primary"
                    data-toggle="modal"
                    data-target="#delDesk">
                删除桌号
            </button>
            <button id="btn_print" class="button button-primary   button-primary"
                    data-toggle="modal"
                    data-target="#myModal_qrcode"
                    onclick="printAll()"
            >
                打印所有
            </button>
        </div>
        <form class="form-search pull-right">
            <input type="text" name="username" id="queryname" class="input-medium search-query">
            <button type="submit" class="button button-circle button-primary ">
                <span class="glyphicon glyphicon-search"/></button>
        </form>
    </div>

    <div id="deskContent" class="row placeholders">
        {% for desk in desks %}
            <div class="col-sm-6 col-md-2 placeholder">
                <div class="thumbnail">
                    <img id="qrcorde_{{ desk.id }}" src="{{ desk.qr_coder }}" alt="...">
                    <div class="caption">
                        <h3 id="desk_{{ desk.id }}">{{ desk.id }}号</h3>
                        <button class="button button-small button-primary"
                                onclick="printQrcode('#qrcorde_{{ desk.id }},#desk_{{ desk.id }}')">打印二维码
                        </button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
{% block modal %}
    <div class="modal fade" id="delDesk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除桌号</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3" for="domain">桌号：</label>
                            <div class="col-md-9">
                                <select id="delDeskId" class="form-control">
                                    {% for desk in desks %}
                                        <option>{{ desk.id }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <div class="button-group">
                        <button type="submit"
                                class="button button-primary button-small"
                                onclick="delSingle()">
                            确定
                        </button>
                        <button type="button"
                                class="button button-small"
                                data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addDesks" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">批量新增桌号</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3" for="domain">域名/ip地址：</label>
                            <div class="col-md-9">
                                <input type="text" id="domain" class="form-control " name="domain"
                                       placeholder="域名/ip地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3" for="portid">端口号：</label>
                            <div class="col-md-9">
                                <input type="text" id="port" class="form-control "
                                       placeholder="端口号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3" for="desknum">生成个数：</label>
                            <div class="col-md-9">
                                <input type="text" id="desknum" class="form-control " name="number"
                                       placeholder="数量">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="button-group">
                        <button type="submit"
                                class="button button-primary button-small"
                                onclick="addMany()">
                            确定
                        </button>
                        <button type="button"
                                class="button button-small"
                                data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js_content %}

    <script>

        function printQrcode(prints) {
            /* Act on the event */
            $(prints).printThis({
                debug: false,
                importCSS: false,
                importStyle: false,
                printContainer: true,
//               loadCSS: "/Content/Themes/Default/style.css",
                pageTitle: "二维码",
                removeInline: false,
                printDelay: 333,
                header: null,
                formValues: false
            })
//      alert("等待打印");;
        }

        function printAll() {
            var printString = ""
            {% for desk in desks %}
                printString += "#qrcorde_{{ desk.id }},#desk_{{ desk.id }},"
            {% endfor %}
            var prints = printString.substr(0, printString.length - 1)
            printQrcode(prints)

        }


        function addMany() {
            var domain = $('#domain').val()
            var number = $('#desknum').val()
            var port = $('#port').val()
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:desk_add_many' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'domain': domain, 'number': number, 'port': port},
                success: function (data) {
                    if (data.state == 'success') {
                        $.scojs_message('新增' + data.start + '-' + data.end + '桌号成功', $.scojs_message.TYPE_OK);
                        $('#addDesks').modal('hide')
                        reLoad(data.desks)
                    }
                },
            })
        }

        function delSingle() {
            var id = $('#delDeskId').val()
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:desk_del_single' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'del_id': id,},
                success: function (data) {
                    if (data.state == 'success') {
                        $.scojs_message(id + '号删除成功', $.scojs_message.TYPE_OK);
                        $('#delDesk').modal('hide')
                        reLoad(data.desks)
                        selectReLoad(data.desks)
                    }
                },
            })
        }

        function selectReLoad(data) {
            var desks = JSON.parse(data)
            var html = ""
            for (var key in desks) {
                var id = desks[key].pk
                html += "<option>" + id + "</option>"
            }
            $('#delDeskId').html(html)
        }

        function reLoad(data) {
            var desks = JSON.parse(data)
            var html = ""
            for (var key in desks) {
                var id = desks[key].pk
                var qrcode = desks[key].fields.qr_coder
                var print = "#qrcorde_" + id + ",#desk_" + id
                html +=
                    "<div class='col-sm-6 col-md-3 placeholder'>" +
                    "<div class='thumbnail'>" +
                    "<img id='qrcorde_" + id + "' src='" + qrcode + "' alt='...'>" +
                    "<div class='caption'>" +
                    "<h3 id='desk_" + id + "'>" + id + "号</h3>" +
                    "<button class='button button-small button-primary' onclick=\"printQrcode( '" + print + "')\">打印二维码</button>" +
                    "</div>" +
                    "</div>" +
                    "</div>"
            }
            console.log(html)
            $('#deskContent').html(html)
        }
    </script>

{% endblock %}



